সিএসএস(৩) মাল্টিপল কলাম লেআউট
আপনি সিএসএস(৩) মাল্টিপল কলাম লেআউট ব্যবহার করে আপনার ওয়েব পেজে সহজে খবরের কাগজের মত একাধিক কলাম লিখতে পারবেনঃ
সিএসএস(৩) মাল্টিপল কলাম প্রোপার্টি
নিম্নের টেবিলে সকল মাল্টিপল কলাম প্রোপার্টিগুলো দেখানো হলঃ
সিএসএস(৩) মাল্টিপল কলাম তৈরি
একটি এলিমেন্টকে কয়টি কলামে বিভক্ত করবে তা column-count প্রোপার্টির দ্বারা নির্ধারণ করা হয়।
নিম্নের উদাহরণে <div> এলিমেন্টের লেখা গুলোকে ৩টি কলামে ভাগ করা হলোঃ
kt_satt_skill_example_id=1792
সিএসএস(৩) এর দুইটি কলামের মাঝে দূরত্ব নির্ধারণ
দুইটি কলামের মাঝে দূরত্ব নির্ধারণ করার জন্য column-gap প্রোপার্টি ব্যবহার করা হয়।
নিম্নের উদাহরণে দুইটি কলামের মাঝে ফাকাস্থান 30px রাখা হয়েছেঃ
kt_satt_skill_example_id=1794
কলামের মাঝের স্টাইল
দুইটি কলামের মাঝে যেকোন ধরনের স্টাইল দেওয়ার জন্য column-rule-style প্রোপার্টি ব্যবহার করা হয়। ইহা অনেকটাই বর্ডারের মত কাজ করে। আপনি একটি বর্ডারে যে সকল স্টাইল ব্যবহার করতে পারেন ঠিক ঐ সকল স্টাইলই কলামের মাঝে এই প্রোপার্টি দ্বারা ব্যবহার করতে পারবেনঃ
kt_satt_skill_example_id=1795
দুইটি কলামের মাঝের স্টাইলটির প্রস্থ নির্ধারণ করার জন্য column-rule-width প্রোপার্টি ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=1798
দুইটি কলামের মাঝের স্টাইলটির কালার নির্ধারণ করার জন্যcolumn-rule-colorপ্রোপার্টি ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=1801
column-rule-width, column-rule-style এবং column-rule-color এই তিনটি প্রোপার্টি একত্রে column-rule প্রোপার্টি দ্বারা প্রকাশ করা যায়। অর্থাৎ তিনটি প্রোপার্টির সংক্ষিপ্ত প্রোপার্টি হচ্ছে column-rule প্রোপার্টি।
নিচের উদাহরণে কলামের মাঝে width, style এবং color নির্দেশ করা হয়েছেঃ
kt_satt_skill_example_id=1804
কতগুলো কলাম নিয়ে একটি এলিমেন্ট
আপনি কলামের মাঝে অবস্থিত যে কোনো এলিমেন্ট কয়টি কলাম নিয়ে অবস্থান করবে তা column-span প্রোপার্টি দ্বারা নির্ধারণ করে দিতে পারেন।
নিচের উদাহরণে <h2> এলিমেন্টটি সকল কলামে বিস্তৃত থাকবেঃ
kt_satt_skill_example_id=1807
কলামের প্রস্থ নির্ধারণ
একটি কলামের প্রস্থ কত হবে বা এটি কতটুকু জায়গা দখল করবে তা column-width প্রোপার্টি দ্বারা নির্ধারণ করে দিতে পারেন।
নিম্নের উদাহরণে প্রতিটি কলামের প্রস্থ 120px হবেঃ
kt_satt_skill_example_id=1809
ব্রাউজার সাপোর্ট
Read more
